<template>
	<view class="container">
		<!--背景图片-->
		<image class="bg-image" src="/static/image/bg/bg1.jpg" mode="aspectFill"></image>
		<!--专辑名称-->
		<text class="bg-text">
			{{albumName}}
		</text>
		<!-- 歌曲列表 -->
		<uni-list>
			<!-- 列表页的 template -->
			<uni-list-chat v-for="(current, index) in audioList" :key="index" :title="current.name" :avatar="current.img"
			    :note="current.author" badge-text="收听" link @click="goPlay(audioList, index)">
			</uni-list-chat>
		</uni-list>
	</view>
</template>

<script>
	import {
		audioList
	} from '../../commons/mock.js';
	export default {
		data() {
			return {
				albumName: "",
				audioList: [] //音乐列表
			}
		},
		methods: {
			// 获取指定专辑下所有歌曲
			fetchMusicData(albumId) {
				// 跳转歌曲播放页
				uni.request({
					url: `https://apifoxmock.com/m1/5460619-0-default/getAlbum
				ById/${albumId}`,
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200) {
							// 请求成功
							// console.log(res);
							this.audioList = res.data;
						} else {
							uni.showToast({
								title: '获取音频详情失败，请稍后再试',
								icon: 'none',
							});
						}
					},
					fail: (err) => {
						// 处理网络错误
						uni.showToast({
							title: '网络错误，请稍后再试',
							icon: 'none'
						});
					}
				});
			},
			// 在列表页的goPlay方法中
			goPlay(audioList, index) {
			    uni.navigateTo({
			        url: `/pages/play/play?audioList=${encodeURIComponent(JSON.stringify(audioList))}&index=${index}`
			    });
			}
		},
		onLoad(options) {
			console.log(options);
			// 获取专辑名称
			this.albumName = options.name;
			// 获取专辑 ID
			const albumId = options.id;
			// 根据专辑 id,获取该专辑下所有歌曲
			this.fetchMusicData(albumId);
		}
	}
</script>

<style lang="scss">
	.container {
		.bg-image {
			position: relative;
			width: 100%;
			height: 30vh;
			object-fit: cover;
		}

		.bg-text {
			position: absolute;
			top: 25vh;
			color: #fff;
			left: 50%;
			font-size: 30rpx;
			font-weight: bold;
			transform: translateX(-50%);
		}
	}
</style>